<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="发表评论"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 商品信息组件 -->
            <div class="goods-info">
                <div class="goods-img-box">
                    <img
                        class="goods-img"
                        :src="goodsInfo.imgs[0].title_img"
                    />
                </div>
                <div class="goods-info-box">
                    <div class="goods-name">{{goodsInfo.title}}</div>
                    <div class="goods-detail">{{goodsInfo.title_sub}}</div>
                    <div class="goods-price">￥{{goodsInfo.price_market | currency}}</div>
                </div>
            </div>
            <!-- 商品信息组件 -->

            <!-- 评论填写组件 -->
            <textarea
                class="comment-write-box"
                placeholder="请发表您对产品的评论吧！"
                v-model="commentWord"
                @blur="goBottom"
            ></textarea>
            <!-- 评论填写组件 -->

            <!-- 评论图片上传组件 -->
            <div class="comment-pic-box">
                <div
                    class="upload-img-box"
                    v-for="(item,index) of uploadImg"
                    :key="index"
                >
                    <img
                        class="upload-delete"
                        src="@/assets/images/comment/delete.png"
                        @click="deleteUpload(index)"
                    />
                    <img
                        class="upload-img"
                        :src="item.uploadImg"
                    />
                </div>
                <div
                    v-if="uploadImg.length<3"
                    class="pic-upload"
                    @click="selectPic"
                ></div>
            </div>
            <!-- 评论图片上传组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 发表评论组件 -->
        <div
            class="confirm-comment"
            @click="sureComment"
        >发表评论</div>
        <!-- 发表评论组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import wx from 'weixin-js-sdk'
export default {
    name: 'Comment',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.29rem'
            },
            goodsInfo: '',
            uploadImg: [],
            imgs: [],
            commentWord: ''
        }
    },
    mounted() {
        this.getGoodsInfo()
    },
    methods: {
        getGoodsInfo() {
            let postData = this.qs.stringify({
                id: this.$route.query.goodsId
            })
            this.axios.post('/api/goods/info.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.goodsInfo = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        selectPic() {
            const that = this
            let ios
            let ua = navigator.userAgent.toLowerCase()
            if (ua.match(/iphone/i) == 'micromessenger') {
                ios = true
            } else {
                ios = false
            }
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    let localIds = res.localIds
                    wx.uploadImage({
                        localId: localIds[0],
                        isShowProgressTips: 1,
                        success: function(res) {
                            let serverId = res.serverId
                            that.imgs.push(serverId)
                            if (ios || window.__wxjs_is_wkwebview) {
                                let localId = localIds[0]
                                wx.getLocalImgData({
                                    localId: localId,
                                    success: function(res) {
                                        let localData = res.localData // localData是图片的base64数据，可以用img标签显示
                                        localData = localData.replace(
                                            'jgp',
                                            'jpeg'
                                        )
                                        that.uploadImg.push({
                                            uploadImg: localData,
                                            serverId: serverId
                                        })
                                    },
                                    fail: function(res) {
                                        commonDialog.alert(
                                            '提示',
                                            '该图片暂时无法查看'
                                        )
                                    }
                                })
                            } else {
                                that.uploadImg.push({
                                    uploadImg: localIds[0],
                                    serverId: serverId
                                })
                            }
                        }
                    })
                }
            })
        },
        deleteUpload(index) {
            this.uploadImg.splice(index, 1)
            this.imgs.splice(index, 1)
        },
        sureComment() {
            const that = this
            if (this.commentWord == '' || this.commentWord == null) {
                this.commonDialog.alert('提示', '请输入您对商品的评价')
                return
            }
            let postData = this.qs.stringify({
                orders_goods_id: this.$route.query.reviewId,
                content: this.commentWord,
                imgs: this.imgs
            })
            this.axios
                .post('/api/user/comment/post.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert(
                            '提示',
                            '评论成功！',
                            function() {
                                that.$router.back(-1)
                            }
                        )
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        goBottom() {
            window.scroll(0, 0)
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.goods-info
    position relative
    display flex
    align-items center
    height 2.68rem
    padding 0 0.32rem
    background #fff
    margin-bottom 0.26rem
    .goods-img-box
        width 1.85rem
        height 1.85rem
        overflow hidden
        border 1px solid #e5e5e5
        box-sizing border-box
        .goods-img
            width 100%
            height 100%
    .goods-info-box
        flex 1
        min-width 1px
        margin-left 0.18rem
        .goods-name
            font-size 0.38rem
            color #333
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
        .goods-price
            margin-top 0.18rem
            font-size 0.33rem
            color #d7463c
        .goods-detail
            font-size 0.33rem
            color #666
            margin-top 0.18rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
.comment-write-box
    width 100%
    height 2rem
    padding 0.3rem
    font-size 0.33rem
    color #333
    border none
    resize none
    outline none
    box-sizing border-box
.comment-pic-box
    display flex
    flex-wrap wrap
    align-items center
    padding 0.42rem 0.38rem
    background #fff
    .pic-upload
        margin-right 0.26rem
        margin-bottom 0.26rem
        width 1.87rem
        height 1.87rem
        border 1px dashed #e5e5e5
        box-sizing border-box
        background-image url('../../assets/images/comment/pic-add.png')
        background-size 100% 100%
        background-repeat no-repeat
        .pic-upolad-btn
            width 1.87rem
            height 1.87rem
            opacity 0
    .upload-img-box
        position relative
        margin-right 0.4rem
        margin-bottom 0.4rem
        width 1.87rem
        height 1.87rem
        border 1px solid #e5e5e5
        box-sizing border-box
        .upload-delete
            position absolute
            top -0.2rem
            right -0.2rem
            width 0.4rem
            height 0.4rem
        .upload-img
            width 100%
            height 100%
.confirm-comment
    position absolute
    bottom 0
    left 0
    right 0
    height 1.29rem
    line-height 1.29rem
    text-align center
    background #d7463c
    font-size 0.38rem
    color #fff
</style>

